<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <th:block th:include="include :: header('菜单列表')"/>
    </head>
    <body class="gray-bg">
        <div class="container-div">
            <div class="row">
                <div class="col-sm-12 search-collapse">
                    <form id="menu-form">
                        <div class="select-list">
                            <ul>
                                <li>
                                    菜单名称：
                                    <input type="text" name="menuName"/>
                                </li>
                                <li>
                                    菜单状态：
                                    <select name="use"
                                            th:with="dicts=${@sysDictDataServiceImpl.listDictDataByTypeSign('sys_use_status')}">
                                        <option value="">所有</option>
                                        <option th:each="dict : ${dicts}" th:text="${dict.dataKey}"
                                                th:value="${dict.dataValue}"></option>
                                    </select>
                                </li>
                                <li>
                                    <a class="btn btn-primary btn-rounded btn-sm" onclick="$.treeTable.search()"><i
                                            class="fa fa-search"></i>&nbsp;搜索
                                    </a>
                                    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                            class="fa fa-refresh"></i>&nbsp;重置
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </form>
                </div>

                <div class="btn-group-sm" id="toolbar" role="group">
                    <a class="btn btn-success" onclick="$.operate.add(0)">
                        <i class="fa fa-plus"></i>
                        新增
                    </a>
                    <a class="btn btn-primary" onclick="$.operate.edit()">
                        <i class="fa fa-edit"></i>
                        修改
                    </a>
                    <a class="btn btn-info" id="expandAllBtn">
                        <i class="fa fa-exchange"></i>
                        展开/折叠
                    </a>
                </div>
                <div class="col-sm-12 select-table table-striped">
                    <table id="bootstrap-tree-table"></table>
                </div>
            </div>
        </div>

        <th:block th:include="include :: footer"/>
        <script th:inline="javascript">
            const sys_use_status = [[${@sysDictDataServiceImpl.listDictDataByTypeSign('sys_use_status')}]];
            const prefix = ctx + "system/menu";

            $(function () {
                const options = {
                    code: "id",
                    parentCode: "parentId",
                    uniqueId: "id",
                    expandAll: false,
                    expandFirst: false,
                    url: prefix + "/list",
                    createUrl: prefix + "/add/{id}",
                    updateUrl: prefix + "/edit/{id}",
                    removeUrl: prefix + "/remove/{id}",
                    modalName: "菜单",
                    columns: [
                        {
                            field: 'selectItem',
                            radio: true
                        },
                        {
                            title: '菜单名称',
                            field: 'menuName',
                            width: '20%',
                            formatter: function (value, row, index) {
                                if ($.common.isEmpty(row.icon)) {
                                    return row.menuName;
                                } else {
                                    return '<i class="' + row.icon + '"></i> <span class="nav-label">' + row.menuName + '</span>';
                                }
                            }
                        },
                        {
                            field: 'id',
                            title: 'ID',
                            align: "left",
                            visible: false
                        },
                        {
                            field: 'orderNum',
                            title: '排序',
                            width: '10%',
                            align: "left"
                        },
                        {
                            field: 'path',
                            title: '请求地址',
                            width: '15%',
                            align: "left",
                            formatter: function (value, row, index) {
                                return $.table.tooltip(value);
                            }
                        },
                        {
                            title: '类型',
                            field: 'menuType',
                            width: '10%',
                            align: "left",
                            formatter: function (value, item, index) {
                                if (item.menuType === 'D') {
                                    return '<span class="label label-success">目录</span>';
                                } else if (item.menuType === 'M') {
                                    return '<span class="label label-primary">菜单</span>';
                                } else if (item.menuType === 'B') {
                                    return '<span class="label label-warning">按钮</span>';
                                }
                            }
                        },
                        {
                            field: 'authoritySign',
                            title: '权限标识',
                            width: '15%',
                            align: "left",
                            formatter: function (value, row, index) {
                                return $.table.tooltip(value);
                            }
                        },
                        {
                            field: 'use',
                            title: '使用状态',
                            align: "left",
                            formatter: function (value, item, index) {
                                return $.table.selectDictLabel(sys_use_status, item.use);
                            }
                        },
                        {
                            field: 'createTime',
                            title: '创建时间',
                            align: "left",
                            visible: false
                        },
                        {
                            field: "createBy",
                            title: "创建者",
                            align: "left",
                            visible: false
                        },
                        {
                            field: 'updateTime',
                            title: '更新时间',
                            align: "left",
                            visible: false
                        },
                        {
                            field: "updateBy",
                            title: "更新者",
                            align: "left",
                            visible: false
                        },
                        {
                            field: "remark",
                            title: "备注",
                            align: "left",
                            visible: false
                        },
                        {
                            title: '操作',
                            width: '20%',
                            align: "left",
                            formatter: function (value, row, index) {
                                const actions = [];
                                actions.push('<a class="btn btn-success btn-xs ' + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                                actions.push('<a class="btn btn-info btn-xs ' + '" href="javascript:void(0)" onclick="$.operate.add(\'' + row.id + '\')"><i class="fa fa-plus"></i>新增</a> ');
                                actions.push('<a class="btn btn-danger btn-xs ' + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-trash"></i>删除</a>');
                                return actions.join('');
                            }
                        }]
                };
                $.treeTable.init(options);
            });
        </script>
    </body>
</html>